<script>
import { defineComponent } from 'vue'
import LeftNavBar from '../components/LeftNavBar.vue'
import TopNavBar from '../components/TopNavBar.vue'
import MainView from './MainView.vue'
export default defineComponent({
    components:{TopNavBar, LeftNavBar, MainView},
    setup() {

    },
})

</script>

<template>
    <div class="common-layout ">
      <div class="body">
        <el-container>
          <el-header class="header"><TopNavBar/></el-header>
          <el-container>
            <el-aside class="aside"><LeftNavBar/></el-aside>
            <el-main class="main">
              <MainView/>
            </el-main>
          </el-container>
        </el-container>
    </div>
  </div>
</template>

<style scoped >
header{
  padding: 0;
  margin:-8px -8px auto;
}
aside{
  margin:3px -8px auto;
  width: auto;
}
main{
  margin:3px auto;
}
content{
    margin-left:-200px;float:left;width:100%;
}
content.contentInner{
    margin: left 200px;;
}
</style>
